<script setup lang="ts">
import { uploadVersion } from '@/api/system/version';
import type { Version } from '@/api/system/version/type';
import { ElMessage, type UploadInstance, type UploadRawFile, type UploadRequestOptions, type UploadUserFile } from 'element-plus';
import { ref } from 'vue';
import type { Result } from '../../../../utils/request';

const uploadRef = ref<UploadInstance>()
const dialogVisible = defineModel();
const fileList = ref([] as UploadUserFile[]);
const data = ref({} as Version);

const upload = (rawFile: UploadRawFile) => {
    console.log(rawFile);
    return false;
}

const submitUpload = () => {
    if (fileList.value[0].raw != undefined) {
        uploadVersion(fileList.value[0].raw, data.value).then((res) => {
            const {msg} = res as Result;
            ElMessage({
                type: 'success',
                message: msg,
            })
        })
    }
    console.log(fileList.value);
    dialogVisible.value = false
}

const handleExceed = () => {

}

</script>

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="上传版本" width="500">
            <div class="content">
                <el-form-item label="版本名">
                    <el-input v-model="data.name" />
                </el-form-item>
                <el-form-item label="更新内容">
                    <el-input v-model="data.content" />
                </el-form-item>
                <el-upload
                    name="file"
                    ref="uploadRef"
                    :limit="1"
                    :on-exceed="handleExceed"
                    :auto-upload="false"
                    v-model:file-list="fileList"
                    drag
                    @before-upload="upload"
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        Drop file here or <em>click to upload</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            jpg/png files with a size less than 500kb
                        </div>
                    </template>
                </el-upload>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitUpload">确认上传</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;
}

</style>